<style scoped lang="less">
.census-main {
    padding: 20px;
    margin-left: 0;
}
</style>
<template>
    <div class="page-census page-setting">
        <div class="crumbs">
            <router-link to="/">首页</router-link> / <span class="active">历史报警信息</span>
        </div>
        <div class="census-main" :style="{ height: mainH + 'px' }">
            <div class="opers flex v-c">
                <el-form :inline="true" class="filter-blk flex-1">
                    <el-form-item>
                        <el-date-picker
                            v-model="filterForm.alarmtime"
                            type="date"
                            placeholder="请选择报警时间"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="ml-10">
                        <el-select
                            v-model="filterForm.deviceClassify"
                            placeholder="所有系统"
                            clearable
                        >
                            <el-option
                                :label="item.name"
                                :value="item.id"
                                v-for="(item, index) in typeList"
                                :key="index"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="ml-10">
                        <el-select v-model="filterForm.isHandle" placeholder="是否处置" clearable>
                            <el-option label="已处置" :value="true"></el-option>
                            <el-option label="未处置" :value="false"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="ml-10">
                        <el-input
                            placeholder="请输入设备编号"
                            v-model.trim="filterForm.number"
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="ml-10">
                        <el-input
                            placeholder="请输入单位名称"
                            v-model.trim="filterForm.businessName"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchAction"
                            ><i class="iconfont icon-search"></i> 查询</el-button
                        >
                    </el-form-item>
                </el-form>
                <div>
                    <el-button
                        v-if="hasPermission('018003')"
                        type="blue"
                        @click="handleAllAction"
                        :disabled="!$store.getters.hasEditPermission"
                        >一键处置</el-button
                    >
                    <el-button
                        v-if="hasPermission('018001')"
                        type="blue"
                        @click="exportAction"
                        :disabled="!$store.getters.hasEditPermission"
                        ><i class="iconfont icon-export-folder"></i> 导出</el-button
                    >
                </div>
            </div>
            <el-table :data="dataList" style="width: 100%" v-loading="loading">
                <el-table-column prop="businessName" label="所属单位"></el-table-column>
                <el-table-column
                    prop="alarmTypeName"
                    label="报警类型"
                    width="120"
                ></el-table-column>
                <el-table-column prop="number" label="设备编号"></el-table-column>
                <el-table-column prop="deviceName" label="设备名称"></el-table-column>
                <el-table-column prop="content" label="报警内容"></el-table-column>
                <el-table-column prop="position" label="安装位置"></el-table-column>
                <el-table-column prop="alarmtime" label="报警时间"></el-table-column>
                <el-table-column prop="isHandleName" label="是否处置"></el-table-column>
                <el-table-column prop="handletime" label="处置时间"></el-table-column>
                <el-table-column prop="handlePerson" label="处置人员"></el-table-column>
                <!-- <el-table-column prop="handleRemark" label="处置备注"></el-table-column> -->
                <el-table-column label="操作" width="140">
                    <template slot-scope="scope">
                        <div class="nowrap">
                            <template v-if="hasPermission('018002')">
                                <el-button
                                    type="primary"
                                    @click="handleAction(scope.row)"
                                    v-if="!scope.row.isHandle"
                                    :disabled="!$store.getters.hasEditPermission"
                                    >处置</el-button
                                >
                                <el-button type="primary" @click="handleAction(scope.row)" v-else
                                    >已处置</el-button
                                >
                            </template>

                            <el-button
                                type="primary"
                                @click="muteAction(scope.row)"
                                v-if="scope.row.deviceClassify == 3 && hasPermission('018004')"
                                :disabled="!$store.getters.hasEditPermission"
                                >消音</el-button
                            >
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-if="total > 0"
                class="text-right mt-20 mr-20"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="prev, pager, next, total, jumper"
                :total="total"
            >
            </el-pagination>
        </div>

        <!-- 处置 start -->
        <el-dialog
            v-if="handleModalVisible"
            title="报警处置"
            :visible.sync="handleModalVisible"
            width="500px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
        >
            <Handle
                ref="handle"
                :activeData="activeData"
                @success="submitSuccessAction"
                @fail="handling = false"
                @submitting="handling = true"
                @cancel="handleModalVisible = false"
            >
            </Handle>
            <div slot="footer" v-if="!activeData.isHandle">
                <el-button type="cancel" @click="handleModalVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="handling"
                    @click="submitAction"
                    :disabled="!$store.getters.hasEditPermission"
                    >处置</el-button
                >
            </div>
            <div slot="footer" v-else>
                <el-button type="cancel" @click="handleModalVisible = false">确定</el-button>
            </div>
        </el-dialog>
        <!-- 处置 end -->

        <!-- 一键处置 start -->
        <el-dialog
            v-if="handleAllModalVisible"
            :visible.sync="handleAllModalVisible"
            title="报警一键处置"
            width="500px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
        >
            <HandleAll
                ref="handleAll"
                @success="handleAllSuccessAction"
                @fail="handling = false"
                @submitting="handling = true"
                @cancel="handleAllModalVisible = false"
            >
            </HandleAll>
            <div slot="footer">
                <el-button type="cancel" @click="handleAllModalVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="handling"
                    @click="doHandleAllAction"
                    :disabled="!$store.getters.hasEditPermission"
                    >处置</el-button
                >
            </div>
        </el-dialog>
        <!-- 一键处置 end -->
    </div>
</template>
<script>
import Handle from "@/components/HandleAlarm.vue"
import HandleAll from "@/components/HandleAllAlarm.vue"
import { mapState } from "vuex"
export default {
    name: "HistoryAlarm",
    components: {
        Handle,
        HandleAll,
    },
    props: {
        winH: {
            type: Number,
            default: 500,
        },
    },
    // <!-- 1 电气火灾 2 消防用水 3 烟感 4 可燃气体 5 火灾自动联网 6 消防可视化 -->
    data() {
        return {
            typeList: [
                {
                    id: "1",
                    name: "电气火灾监测系统",
                },
                {
                    id: "2",
                    name: "消防用水监测系统",
                },
                {
                    id: "3",
                    name: "独立烟感系统",
                },
                {
                    id: "4",
                    name: "可燃气体报警系统",
                },
                {
                    id: "5",
                    name: "火灾自动联网报警系统",
                },
                {
                    id: "6",
                    name: "消防可视化监测系统",
                },
            ],
            filterForm: {},
            loading: false,
            total: 0,
            currentPage: 1,
            pageSize: 8,
            loading: false,
            dataList: [],
            handleModalVisible: false,
            handling: false,
            activeData: null,
            handleAllModalVisible: false,
        }
    },
    computed: {
        ...mapState(["siteInfos"]),
        mainH() {
            return this.winH - 180
        },
    },
    watch: {},
    methods: {
        getData(page) {
            this.loading = true
            let params = Object.assign(
                {
                    page: page,
                    limit: this.pageSize,
                },
                this.filterForm
            )

            this.$get(
                "/fireFightingIOT/historicalAlarmInfo/listHistoricalAlarmInfoListPage",
                params
            ).then(
                (res) => {
                    this.loading = false
                    let data = res.data
                    this.currentPage = page
                    this.total = data.totalSize
                    this.dataList = data.Items
                },
                (err) => {
                    this.loading = false
                    this.currentPage = page
                    this.total = 0
                    this.dataList = []
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        searchAction() {
            this.getData(1)
        },
        handleCurrentChange(page) {
            this.getData(page)
        },
        getDataById(id, cbk) {
            this.$get("/fireFightingIOT/historicalAlarmInfo/detail", {
                id: id,
            }).then(
                (res) => {
                    let thisData = res.data
                    cbk && cbk(thisData)
                },
                (err) => {
                    //
                }
            )
        },
        exportAction() {
            let params = ""
            for (let key in this.filterForm) {
                params += `&${key}=${this.filterForm[key]}`
            }
            window.open(
                this.config.baseApi +
                    "/uploadFile/exportDeviceAlarmLog?accountname=" +
                    this.siteInfos.accountname +
                    params
            )
        },
        handleAction(item) {
            this.getDataById(item.id, (data) => {
                this.activeData = data
                this.handleModalVisible = true
            })
        },
        submitAction() {
            this.$refs.handle.submitAction()
        },
        submitSuccessAction() {
            this.handling = false
            this.handleModalVisible = false
            this.activeData = null
            this.getData(this.currentPage)
        },

        handleAllAction() {
            this.handleAllModalVisible = true
        },
        doHandleAllAction() {
            this.$refs.handleAll.submitAction()
        },
        handleAllSuccessAction() {
            this.handling = false
            this.handleAllModalVisible = false
            this.getData(this.currentPage)
        },

        deleteAction(item) {
            this.showConfirm("确定删除该设备吗？", () => {
                this.deleting = true
                this.$post("/fireFightingIOT/device/typeDelete", {
                    id: item.id,
                    deviceClassify: item.deviceClassify,
                }).then(
                    (res) => {
                        this.deleting = false
                        this.$message.success("删除成功")
                        // this.dataList.splice(index,1)
                        this.getData(this.currentPage)
                    },
                    (err) => {
                        this.deleting = false
                        this.$message.error(err.msg)
                    }
                )
            })
        },
    },
    created() {
        this.getTypeList((list) => {
            this.typeList = list
        })
        this.getData(1)
    },
    activated() {},
    mounted() {},
}
</script>
